<template>
    <div>
        <div class="btns">
            <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>     
        </div>
        <div class="tab_content">
            <el-table :data="Module" style="width: 100%">
                <!-- 其中 prop 的名称必须要和java代码中的实体类的名称相对应，才能获取到接口的数据 -->
                <el-table-column prop="id" label="序号" > </el-table-column>
                <el-table-column prop="name" label="模型名称" > </el-table-column>
                <el-table-column prop="algorithm" label="算法" > </el-table-column>
                <el-table-column prop="introduce" label="介绍" > </el-table-column>
                <el-table-column prop="status" label="状态" > </el-table-column>
                <el-table-column prop="createTime" label="创建时间" > </el-table-column>
                <!-- 操作列 -->
                <el-table-column width="100" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
                    <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
                </template>
                </el-table-column>

            </el-table>
        </div> 

    </div>
</template>

<script>
import {del, get } from '@/utils/request'
export default {
    data(){
        return{
            // 利用Module来接数据
            Module:[],
            visible:false
        }
    },

    methods:{
        editHandler(row){
            this.$router.push({
                path:"/message/module_form",
                query:row
            })
        },

        deleteHandler(row){
             this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
             }).then(() => {
                    let url = "http://localhost:8888/module/deleteById"
                    del(url,{id:row.id}).then(resp =>{
                    // 1. 提示
                    this.$message({type:"success",message:resp.message});
                    // 2. 刷新
                    this.loadModules();
                    })
            })
        },

        toFormHandler(){
                // 按钮的实现，跳转到表单页面，其中module代表路由表（index.js）中的path路径。父路径＋子路径
                this.$router.push({
                    path:"/message/module_form"
                }

            )
        },
        loadModules(){
            let url="http://localhost:8888/module/query"
            get(url).then(resp => {
                console.log(resp.data)
                this.Module = resp.data
            })
        }
    },
        // 生命周期钩子函数
    created(){
        this.loadModules();
    }
    
}
</script>

<style lang="sass" scoped>

</style>